<template>
  <div class="personnelList shopuserList">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/dataExpress' }"
        ><i class="lh fw_300 lh-seller"></i
      ></el-breadcrumb-item>
      <el-breadcrumb-item>B端-商户</el-breadcrumb-item>
      <el-breadcrumb-item>商户账号管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow mt_15">
      <div class="tableMaxBox">
        <div class="pl_10 pr_10" style="height: 40px">
          <div class="fl">
            <span class="addOK mr_5" @click="goToAdd()">新增账号</span>
          </div>
          <div class="fr ml_10">
            <div
              class="search_box fl"
              :style="{
                width: manageInfo.user_info.type != 2 ? '887px' : '770px',
                'border-top-right-radius': '0 0',
                'border-bottom-right-radius': '0 0',
              }"
            >
              <div class="fl s_type" v-if="manageInfo.user_info.type != 2">
                <el-autocomplete
                  class="inline-input"
                  v-model="business_name"
                  :fetch-suggestions="querySearch3"
                  placeholder="商户名称"
                  :trigger-on-focus="true"
                  @select="handleSelect3"
                  clearable
                ></el-autocomplete>
              </div>
              <div class="fl s_type">
                <el-autocomplete
                  class="inline-input"
                  v-model="shop_name"
                  :fetch-suggestions="querySearch"
                  placeholder="店铺名称"
                  :trigger-on-focus="true"
                  @select="handleSelect"
                  clearable
                ></el-autocomplete>
              </div>
              <div class="fl s_type">
                <el-select
                  v-model="activation"
                  placeholder="激活状态"
                  clearable
                >
                  <el-option label="已激活" value="1"></el-option>
                  <el-option label="未激活" value="2"></el-option>
                </el-select>
              </div>
              <div class="fl s_type">
                <el-select v-model="status" placeholder="账号状态" clearable>
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="停用" value="2"></el-option>
                </el-select>
              </div>
              <!-- <div class="fl s_type">
                <el-select v-model="is_empty_shop" placeholder="有无店铺">
                  <el-option label="有" value="1"></el-option>
                  <el-option label="无" value="2"></el-option>
                </el-select>
              </div> -->
              <div class="fl s_type">
                <el-input v-model="s_mobile" placeholder="手机号"></el-input>
              </div>
              <div class="fl s_type">
                <el-input v-model="s_staff_name" placeholder="姓名"></el-input>
              </div>
              <div class="fl s_type">
                <el-select v-model="role_id" placeholder="角色" clearable>
                  <el-option
                    :label="item"
                    :value="key"
                    v-for="(item, key) in permissArr"
                    :key="key"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search_box fl" style="width: 92px; border: 0">
              <div class="fl s_submit_set pointer" @click="resetBtn">重置</div>
              <div class="fl s_submit pointer" @click="shearchBtn">搜索</div>
            </div>
          </div>
        </div>
        <template>
          <el-table :data="userList" stripe>
            <el-table-column
              prop="id"
              label="序号"
              width="80px"
            ></el-table-column>
            <el-table-column prop="mobile" label="手机号" width="200px">
              <template slot-scope="{ row, $index }">
                <span>{{ row.mobile }}</span>
                <!-- <span class="main_user ml_10" v-if="row.type == 1">主账号</span> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="role_name"
              label="角色"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="business_name"
              label="所属商户"
              width="200px"
            ></el-table-column>
            <el-table-column
              prop="shops"
              label="所属店铺"
              width="200px"
            ></el-table-column>
            <el-table-column
              prop="email"
              label="Email"
              width="150px"
            ></el-table-column>
            <el-table-column prop="activation" label="激活状态" width="80px">
              <template slot-scope="{ row, $index }">
                <span class="text-danger" v-if="row.activation == 2"
                  >未激活</span
                >
                <span class="text-success" v-if="row.activation == 1"
                  >激活</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="账号状态" width="80px">
              <template slot-scope="{ row, $index }">
                <span class="text-success" v-if="row.status == 1">正常</span>
                <span class="text-danger" v-if="row.status == 2">停用</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="last_time"
              label="最后操作时间"
              width="150px"
            ></el-table-column>
            <el-table-column
              prop="ip"
              label="IP"
              width="120px"
            ></el-table-column>
            <el-table-column label="操作" min-width="150px" fixed="right">
              <template slot-scope="{ row, $index }">
                <!-- <el-link type="info" :underline="false" class="InfoFont text-primary" v-if="row.type!=1" @click="goToTag(row)">编辑</el-link> -->
                <el-link
                  type="info"
                  :underline="false"
                  class="InfoFont text-primary"
                  @click="goToTag(row)"
                  >编辑</el-link
                >
                <el-link
                  type="info"
                  :underline="false"
                  class="InfoFont text-primary"
                  v-if="row.status == 2"
                  @click="redactBtn(row, $index, 1)"
                  >开启</el-link
                >
                <el-link
                  type="info"
                  :underline="false"
                  class="InfoFont text-primary"
                  v-if="row.status == 1"
                  @click="redactBtn(row, $index, 2)"
                  >停用</el-link
                >
                <el-link
                  type="info"
                  :underline="false"
                  class="InfoFont text-primary"
                  @click="redactPasswordBtn(row)"
                  >修改密码</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <page
            :total="total"
            :pageNums="pageNum"
            @pagedata="onChildValue"
          ></page>
        </template>
      </div>
    </div>
    <!-- 商户状态-关闭弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="StateShowStop"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <span>关闭账号后，账号将无法正常登录客户端平台</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtn(2)">确 定</span>
        <span class="resetBtn" @click="hiddenRY">取 消</span>
      </div>
    </el-dialog>

    <!-- 商户状态-开启弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="StateShowStart"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <span>开启商户账号，商户可正常登录客户端平台。</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtn(1)">确 定</span>
        <span class="resetBtn" @click="hiddenRY">取 消</span>
      </div>
    </el-dialog>
    <!-- 审核状态-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="PersonnelAudit"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>审核
          </div>
          <div class="fl list-cont">
            <el-radio v-model="tag" label="30">签约成功</el-radio>
            <el-radio v-model="tag" label="40">签约失败</el-radio>
          </div>
        </div>
        <div class="row-info clear" v-if="tag == 40">
          <div class="fl title-key">失败原因</div>
          <div class="fl list-cont">
            <el-input
              type="textarea"
              :rows="4"
              :cols="32"
              v-model="text"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtnQY()">确 定</span>
        <span class="resetBtn" @click="PersonnelAudit = false">取 消</span>
      </div>
    </el-dialog>
    <!-- 删除-弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="StateShowdel"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <span>删除账号后，账号将无法正常登录客户端平台</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addMenuBtn(3)">确 定</span>
        <span class="resetBtn" @click="StateShowdel = false">取 消</span>
      </div>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passwordShow"
      width="560px"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="auditCentent password">
        <div class="row-info clear">
          <div class="fl title-key">
            <span>登录账号：</span>
          </div>
          <div class="fl list-cont">
            <span>{{ userPwd.username }}</span>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>
            <span>登录密码：</span>
          </div>
          <div class="fl list-cont">
            <el-input
              v-model="userPwd.password"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
        <div class="row-info clear">
          <div class="fl title-key">
            <i class="lhadmin lhadmin-wujiaoxing"></i>
            <span>再次确认密码：</span>
          </div>
          <div class="fl list-cont">
            <el-input
              v-model="userPwd.password1"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="redactPwdSubmit">确 定</span>
        <span class="resetBtn" @click="close">取 消</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var common = require('../../../static/tool.js')
import { setShopUserPwd } from '@/api/shop.js'
import { PERMISSARR } from '@/utils/util.js'

export default {
  name: 'ShopList',
  data() {
    return {
      id: '',
      dataMes: '',
      ids: '',
      agreement: '',
      index: '',
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
      url: common.url,
      head_url: common.head_url,
      //搜索对应值
      business_id: '', //所属商户ID
      business_name: '', //所属商户name
      shop_id: '', //店铺id
      shop_name: '', //店铺名
      activation: '', //激活状态：1:未激活  2:已激活
      status: '', //账号状态： 1:正常  2:禁用
      s_mobile: '', //手机号
      s_staff_name: '', //姓名
      is_empty_shop: '', //有无店铺，1有  2无

      userList: [], //店铺列表
      BusinessUserList: [], //销售列表
      diaTitle: '', //弹框title
      StateShowStop: false, //人员状态-弹框关闭
      StateShowStart: false, //人员状态-弹框关闭
      PersonnelAudit: false, //审核状态弹框
      PersonnelXieYi: false, //协议弹框
      StateShowdel: false, //删除弹框
      //向分页组件传值
      total: 0,
      pageNum: '',
      pageSizeNow: '',
      // 审核状态
      tag: '30',
      text: '',
      merchantsList: [], //商户列表
      areaList: [], //区域列表
      shopList: [], //店铺列表

      //修改密码
      passwordShow: false, //修改登录密码
      userPwd: {
        bz_user_sn: '', //管理员id
        username: '', //用户名
        password: '', //密码
        password1: '' //重复密码
      }, //添加管理员

      permissArr: PERMISSARR, // 角色范围
      role_id: '' // 角色
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id //接收传参->商户信息
      this.business_id = this.id
      this.business_sn = this.$route.query.sn
      this.business_name = this.$route.query.name
    }
    if (!sessionStorage.getItem('manageInfo')) {
      // 判断是否登录
      window.location = 'login.html'
      return
    }

    //从管家角色管理点击人数进入
    if (this.$route.query.role_id) {
      this.role_id = this.$route.query.role_id
    }
  },
  mounted() {
    // this.listShop();
    this.getBusinessUser()
    this.getMerchants() //商户列表
    this.listUser() //店铺列表
  },
  methods: {
    //获取商户列表
    getMerchants() {
      let fn = new FormData()
      this.$http.post(this.url + '/business/listForSearch', fn).then(
        res => {
          if (res.data.msg == '查询成功!' || res.data.code == '200') {
            if (res.data.data.list != null) {
              res.data.data.list.forEach(item => {
                item.value = item.name
              })
              this.merchantsList = res.data.data.list
            } else {
              this.merchantsList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    listUser() {
      //获取商铺列表
      let fn = new FormData()
      fn.append('sign_status', 30) //已合作的店铺
      fn.append('status', 1) //启用的店铺
      // fn.append("search_list", 1); //不进行分页
      if (this.manageInfo.user_info.type == 2) {
        fn.append('agent_id', this.manageInfo.user_info.agent_id)
      }
      this.$http.post(this.url + '/shop/getListForSearch', fn).then(
        res => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data != null) {
              res.data.data.list.forEach(item => {
                item.value = item.name
              })
              this.shopList = res.data.data.list
            } else {
              this.shopList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    listShop() {
      //获取账号列表
      let fn = new FormData()
      fn.append('pageSize', this.pageSizeNow) //每页多少条
      fn.append('page', this.pageNum) //页数
      // fn.append('id', this.id);
      if (this.business_name && !this.business_id) {
        this.$message.error('商户不存在')
        return
      }
      if (this.shop_name && !this.shop_id) {
        this.$message.error('店铺不存在')
        return
      }
      if (this.business_name == '') {
        this.business_id = ''
      }
      fn.append('business_id', this.business_id)

      if (this.shop_name == '') {
        this.shop_id = ''
      }
      fn.append('shop_id', this.shop_id)
      fn.append('activation', this.activation)
      fn.append('status', this.status)
      fn.append('mobile', this.s_mobile)
      fn.append('name', this.s_staff_name)
      fn.append('is_empty_shop', this.is_empty_shop)
      fn.append('role_id', this.role_id)
      if (this.manageInfo.user_info.type == 2) {
        fn.append('agent_id', this.manageInfo.user_info.agent_id)
      }

      this.$http.post(this.url + '/shopUser/list', fn).then(
        res => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            if (res.data.data != null) {
              this.userList = res.data.data.list
              this.total = res.data.data.count
            } else {
              this.userList = []
              this.total = 0
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },
    //获取商务负责人列表
    getBusinessUser() {
      let fn = new FormData()
      this.$http.post(this.url + '/manageUser/getBusinessUser', fn).then(
        res => {
          if (res.data.msg == '查询成功!' || res.data.code == '200') {
            if (res.data.data != null) {
              res.data.data.forEach(item => {
                item.value = item.nickname
              })
              this.BusinessUserList = res.data.data
            } else {
              this.BusinessUserList = []
            }
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
    },

    shearchBtn() {
      // 搜索
      this.pageNum = 1
      this.listShop()
    },

    resetBtn() {
      //重置
      this.resetData() //重置请求数据
      this.pageNum = 1
      this.listShop()
    },

    resetData() {
      //重置请求数据
      this.pageNum = 1
      this.business_id = ''
      this.business_name = ''
      this.shop_id = ''
      this.shop_name = ''
      this.activation = ''
      this.status = ''
      this.s_mobile = ''
      this.s_staff_name = ''
      this.is_empty_shop = ''
    },

    goToEdit(row) {
      //编辑页面
      this.$router.push({
        path: '/merchantsEdit',
        query: {
          id: row.id
        }
      })
    },

    goToTag(row) {
      //tag页面
      this.$router.push({
        path: '/shopUserEdit',
        query: {
          id: row.id
        }
      })
    },

    goToAdd() {
      //添加人员账号
      if (this.id != '') {
        this.$router.push({
          path: '/shopUserAdd',
          query: {
            business_id: this.business_id,
            business_sn: this.business_sn,
            business_name: this.business_name
          }
        })
      } else {
        this.$router.push({
          path: '/shopUserAdd'
        })
      }
    },

    //店铺的自动完成
    querySearch(queryString, cb) {
      var restaurants = this.shopList
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      this.shop_id = item.id
    },
    //商户的自动完成
    querySearch3(queryString, cb) {
      var restaurants = this.merchantsList
      var results = queryString ? restaurants.filter(this.createFilter3(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter3(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect3(item) {
      this.business_name = item.name
      this.business_id = item.id
    },
    //商户状态切换
    redactBtn(e, index, res) {
      this.dataMes = e
      this.ids = e.id
      this.index = index
      if (res == '1') {
        // 弹框1
        this.StateShowStart = true //去开启
        this.diaTitle = '温馨提示'
      } else if (res == '2') {
        // 弹框2
        this.StateShowStop = true //去禁用
        this.diaTitle = '温馨提示'
      } else {
        // 弹框3
        this.StateShowdel = true //去删除
        this.diaTitle = '温馨提示'
      }
    },

    //隐藏商户弹框
    hiddenRY() {
      this.StateShowStart = false
      this.StateShowStop = false
    },
    // 商户状态-弹框确认
    addMenuBtn(e) {
      let fn = new FormData()
      fn.append('id', this.ids) //相关id
      fn.append('status', e) //商铺状态

      this.$http.post(this.url + '/shopUser/add', fn).then(
        res => {
          console.log(res)
          if (res.data.msg == '操作成功!' || res.data.code == '200') {
            this.$message.success(res.data.msg)
            this.listShop()
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )

      //关闭弹框
      this.StateShowStop = false
      this.StateShowStart = false
      this.StateShowdel = false
    },

    //审核店铺
    addMenuBtnQY() {
      let fn = new FormData()
      fn.append('id', this.ids) //相关id
      fn.append('sign_status', this.tag)
      fn.append('audit_name', this.manageInfo.username)
      fn.append('fail_reason', this.text)
      this.$http.post(this.url + '/shop/edit', fn).then(
        res => {
          console.log(res)
          if (res.data.msg == '操作成功!' || res.data.code == '200') {
            this.$message.success(res.data.msg)
            this.PersonnelAudit = false //关闭弹框
            this.tag = '30'
            this.text = ''
            this.listShop()
          } else if (res.data.code == '8886') {
            //code   8886  登录过期
            sessionStorage.clear()
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html'
              }
            })
            return
          } else {
            this.$message.error(res.data.msg)
            return
          }
        },
        res => {
          this.$message.error('网络错误！')
          return
        }
      )
      this.PersonnelAudit = false //关闭弹框
    },
    //分页组件->子组件传值
    onChildValue(item) {
      this.pageNum = item[0]
      this.pageSizeNow = item[1]
      this.listShop()
    },
    //审核弹框
    goToPersonnelAudit(e) {
      this.ids = e.id
      this.PersonnelAudit = true
      this.diaTitle = '审核'
    },
    //协议弹框
    goToXieYi(e) {
      this.ids = e.id
      this.agreement = e.agreement
      this.PersonnelXieYi = true
      this.diaTitle = '协议'
    },
    redactPasswordBtn(row) {
      this.userPwd.bz_user_sn = row.bz_user_sn
      this.userPwd.username = row.mobile
      this.passwordShow = true
    },
    // 修改密码
    async redactPwdSubmit() {
      try {
        if (this.userPwd.password == '' || this.userPwd.password1 == '') {
          this.$message.error('请输入密码！')
          return
        }
        if (this.userPwd.password !== this.userPwd.password1) {
          this.$message.error('两次密码输入不一致！')
          return
        }

        let ret = await setShopUserPwd({
          user_sn: this.userPwd.bz_user_sn,
          password: this.userPwd.password
        })

        this.$message.success('修改密码成功！')
        this.close()
        this.listShop()
      } catch (err) { }
    },
    close() {
      this.passwordShow = false
      this.userPwd = {
        bz_user_sn: '',
        username: '',
        password: '',
        password1: ''
      }
    }
  },
  filters: {}
}
</script>

<style scoped>
.search_box {
  width: 790px;
}
.auditCentent .labels {
  min-height: 100px;
}
.auditCentent .labels .labels_label {
  float: left;
  cursor: pointer;
}
.check_label {
  background: var(--purple4);
  color: #fff;
  border: none;
}
.pdf {
  width: 860px;
  height: 600px;
}
.main_user {
  background: var(--zfy-red);
  color: #fff;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}
@media (max-width: 767.78px) {
  .titleBox {
    height: 40px;
  }
}

.shopuserList .password .row-info {
  margin-bottom: 10px;
}

.shopuserList .password .title-key {
  width: 110px;
  text-align: right;
  font-size: 12px;
  color: #888888;
  line-height: 34px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopUserList.vue